<template>
  <div class="home">
    <el-row class="home-container" v-loading="loading">
      <el-col class="home-drawer" :span="12">
        <div class="grid-content bg-purple">
          <network-canvas />
        </div>
      </el-col>
      <el-col class="home-operation" :span="12">
        <div class="grid-content bg-purple-light">
          <config-tabs />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "../components/HelloWorld.vue";
import NetworkCanvas from "../components/Home/NetworkCanvas.vue";
import TestCanvas from "../components/Home/TestCanvas.vue";
import ConfigTabs from "../components/ConfigTabs.vue";
import { getTopoById } from "../api/manage";
import bus from "../util/bus";

export default {
  name: "Home",
  components: {
    HelloWorld,
    NetworkCanvas,
    TestCanvas,
    ConfigTabs,
  },
  data() {
    return {
      loading: false,
    };
  },
  mounted() {
    // console.log("router params: ", this.$route.params.id);
    // getTopoById(this.$store.state.configId).then((res) => {
    // getTopoById(this.$route.params.id).then((res) => {
    //   this.$store.commit("newConfig", JSON.parse(res.data.config));
    //   console.log(
    //     "[[this.$store.state.configId ]]",
    //     this.$store.state.configId
    //   );

    //   console.log("before changeJson");
      // bus.$emit("changeJson");
    //   this.loading = false;
    // });
  },
};
</script>

<style scoped lang="scss">
.home {
  .home-container {
    .home-drawer {
      // height:%;
      // min-height: 90vh;
      // background-color: rgb(127, 219, 255);
    }
    .home-operation {
      // height:%;
      min-height: 90vh;
    }
  }
}
</style>
